<template>
	<view class="rowW gap40 pad-26 mar-top-32">
		<view class="goods-box radius24" v-for="item in list" @click="hanldeClick(item)">
			<view class="image-box">
				<image class="goods-image radius24" :src="item.goods_info.cover+'?image_process=resize,l_350'"
					mode="aspectFill">
				</image>
			</view>
			<view class="info pad-left-right-32  pad-top-bottom-16">
				<view class="name font-24 color-theme">{{item.goods_info.name}}</view>
				<view class="centerY betweenX mar-top-10" v-if="listType == 1">
					<text class="font-24 color-white">共{{item.cnt}}个</text>
					<image @click.stop="hanldeCollect(item.goods_id,collect.includes(item.goods_id))"
						class="navber-right"
						:src="collect.includes(item.goods_id) ? '../../static/icon/has-like.png':'../../static/icon/no-like.png' "
						mode="">
					</image>
				</view>
				<view v-else class="text-right price">
					<text class="font-40 color-grey">{{item.price}}</text>
					<text class="font-24 color-grey">￥</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 接口地址
	import {
		focusGoods,
		focusedGoods
	} from '@/config/api.js'
	export default {
		props: {
			list: {
				type: Array | Object,
				default: () => ([])
			},
			listType: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				isCollect: false,
				// 收藏列表
				collect: []
			}
		},
		created() {
			this.getCollect();
		},
		methods: {
			// 改变状态
			hanldeClick(item) {
				this.$emit('click', item)
			},
			// 获取收藏
			getCollect() {
				focusedGoods({
					// goods_id: this.goodsId,
					ret: 'goods_id',
				}).then(res => {
					this.collect = res.data.lists;
				})
			},
			// 点击切换状态
			hanldeCollect(goodsId, status) {
				focusGoods({
					goods_id: goodsId,
					status: status ? 2 : 1
				}).then(res => {
					uni.$u.toast(res.msg);
					// 已关注
					if (status) {
						let index = this.collect.findIndex(i => i == goodsId)
						this.collect.splice(index, 1);
					} else {
						this.collect.push(goodsId);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods-box {
		background: $uni-bg-theme1;
		width: 328rpx;
		box-sizing: border-box;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;
		overflow: hidden;
		border: 2rpx solid $uni-theme;

		.image-box {
			position: relative;
			box-sizing: border-box;

			.number {
				position: absolute;
				background: rgba(0, 0, 0, .5);
				bottom: 10rpx;
				width: 100%;
				border-radius: 0 0 24rpx 24rpx;
				box-sizing: border-box;
			}

			&::after {
				content: '';
				position: absolute;
				width: 300rpx;
				height: 300rpx;
				background: rgba(0, 0, 0, .08);
				right: -10rpx;
				top: 15rpx;
				border-radius: 20px;
				// z-index: -1;
			}
		}



		.name {
			font-weight: 500;
		}

		.goods-image {
			display: block;
			width: 100%;
			height: 328rpx;
		}

		.navber-right {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.price {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}
</style>